<template>
  <div id="payComponent">
    <div class="pay-info-header">选择支付方式：</div>
    
    <div class="pay-info-item" v-for="(item,index) in payList" :key='item.id' @click="change(index)">
      <div class="pay-info-title">
        <img :src="item.iconSrc" alt="图标" class="pay-info-icon">
        <p class="pay-info-txt">{{item.title}}</p>
      </div>      
      <div class="pay-info-radio" >
        <img src="static/image/public/radio-yes.png" alt="选中" class="pay-info-radioIcon" v-if="chooseType == index">
        <img src="static/image/public/radio-no.png" alt="未选中" class="pay-info-radioIcon" v-else>
        <input type="radio" class="pay-radioInput" :value='index' v-model="chooseType">
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    props:{
      payList:{
        type:Array,
        default:function(){
          return [{
            id:'zhifubao',
            title:'支付宝支付',
            iconSrc:'static/image/public/pay_zhifubao.png'
          },{
            id:'weixin',
            title:'微信支付',
            iconSrc:'static/image/public/pay_weixin.png'
          }]
        }
      }
    },
    data:function(){
      return {
        chooseType:0
      }
    },
    watch:{
      chooseType:function(val){
        this.$emit('get-type',val);
      }
    },
    methods:{
      change:function(index){
        this.chooseType = index;
      }
    }
  }
</script>

<style lang="less" scoped>
  @themeColor:#FDC46F;
  #payComponent{
    margin-top: 20px;
    background: white;
    font-size: 28px;
    color: #333;
    padding: 0 30px;
    .pay-info-header{
      padding: 20px 0;
    }
    .pay-info-item{
      &:after {
        content: "";
        display: table;
        clear: both;
        overflow: hidden;
      }
      padding: 20px 0;
      display: block;
      border-bottom: 1px solid #EBEBEB;
      &:last-child{
        border-bottom: none;
      }
      .pay-info-title{
        float: left;
        .pay-info-icon{
          width: 50px;
          height: 50px;
          margin-right: 10px;
          display: inline-block;
          vertical-align: middle;
        }
        .pay-info-txt{          
          display: inline-block;
          vertical-align: middle;
        }
      }
      .pay-info-radio{
        float: right;
        .pay-info-radioIcon{
          width: 38px;
          height: 38px;
        }
        .pay-radioInput{
          display: none;
        }
      }
    }
  }
</style>